//@ts-nocheck
import { PieChart } from 'echarts/charts'
import { TitleComponent } from 'echarts/components'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import * as echarts from 'echarts/lib/echarts'

import React, { useEffect, useImperativeHandle } from 'react'
import { GradientColorGamut } from '../colorConfig'
import { ChartsInstance } from '../interface'
import './index.less'
echarts.use([PieChart,TitleComponent]);

let echartsInstance: any

interface IProps {
  type:'progress'|'normal'
  chartId?: string
  /* 中间文字 */
  title?: string
  data: Array<{ value: number; title: string }>
  color?: string // type 为progress时需要传
  chartRef?: React.MutableRefObject<ChartsInstance>
}

const BasicPieChart: React.FC<IProps> = ({ title,  data, chartId, chartRef,type,color }) => {

  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId||'charts-basic-pie'))
  }, [])

  const initData=()=>{
    if(type==='progress'){
      return [data[0],{value:100-data?.[0].value,title:''}].map(item=>({...item,name:item.title}))
    }
    return data.map(item=>({...item,name:item.title}))
  }

  const initColor=()=>{
    if(type==='progress'){
      return [color||GradientColorGamut[0],'#F5F7FA' ]
    }
    return GradientColorGamut
  }

  useEffect(()=>{
    if (echartsInstance) setOptions()
  },[data])


  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = () => {    
    echartsInstance.setOption({
      title: {
        show: true,
        text: title||'123',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 24,
          color: '#000',
          fontWeight: 500
        }
      },
      tooltip: {
        trigger: 'item',
        textStyle: {
          fontSize: 12,
        },
        formatter: (item)=>{
          let {data:{title},percent}=item
          return `${title}：${percent}%`
        },
      },
      legend: {
        show: false
      },
      series: {
        name: '',
        silent:type==='progress', // progress 禁用扇区高亮
        startAngle: 90,
        type: 'pie',
        radius: ['70%', '85%'],
        avoidLabelOverlap: true,
        hoverAnimation: false,
        emptyCircleStyle:{ // 占位圆样式
          color:'#F5F7FA'
        },
        label: {
          show: type==='normal',
					formatter: (item)=>{
						let {data:{title},percent}=item
						if(title.length>5){
							title+='\n'
						}
						return `${title}「${percent}%」`
					},
          color:'#617185',
					lineHeight:16
				},
				labelLine:{
          show: type==='normal',
					showAbove:true,
					lineStyle:{
						color:'#DCE0E6'
					}
				},
        data: initData(),
        color:initColor()
      }
    })
  }

  return (
    <div className={`charts-basic-pie-${type}`}>
      <div className="chart" id={chartId || 'charts-basic-pie'} />
      {type==='progress' && <div className="desc">{data?.[0].title}</div>}
    </div>
  )
}
export default (BasicPieChart)
